<template>
  <div class="add-api">
    <el-button type="primary" size='small' class="add-interface" @click=clickAddInterface()><i class="el-icon-plus"></i>添加接口</el-button>
    <el-dialog title="添加接口" :visible.sync="dialogVisible" width="30%">
      <el-form ref="form" :model="interfaceForm" label-width="80px">
        <el-form-item label="接口分组">
          <el-select placeholder="请选择" v-model="interfaceForm.apiGroupId">
            <el-option label="用户管理" value="1"></el-option>
            <el-option label="注册" value="2"></el-option>
            <el-option label="设置" value="3"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="接口名">
          <el-input v-model="interfaceForm.name" placeholder="请输入接口名"></el-input>
        </el-form-item>
        <el-form-item label="接口路径">
          <el-input placeholder="请输入内容" class="input-with-select" v-model="interfaceForm.path">
            <el-select slot="prepend" placeholder="请选择" v-model="interfaceForm.method" class="add-interface-select">
              <el-option label="GET" value="GET"></el-option>
              <el-option label="POST" value="POST"></el-option>
              <el-option label="DELETE" value="DELETE"></el-option>
              <el-option label="PUT" value="PUT"></el-option>
            </el-select>
          </el-input>
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false" size="small">取 消</el-button>
        <el-button type="primary" size="small" @click="addInterface(interfaceForm)">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { addApi, getApi } from '@/api/api'
import dateFormat from "@/utils/dateFormat";
export default {
  data () {
    return {
      dialogVisible: false,
      interfaceForm: {
      }
    }
  },
  methods: {
    //点击添加接口按钮
    clickAddInterface(){
      this.dialogVisible=true
      this.interfaceForm = {}
    },
    //添加接口
    addInterface (interfaceForm) {
      interfaceForm.author = '小丽'
      this.interfaceForm.createTime = dateFormat('YYYY-mm-dd HH:MM:SS', new Date())
      this.interfaceForm.updateTime = dateFormat('YYYY-mm-dd HH:MM:SS', new Date())
      addApi(interfaceForm).then(resp => {
        if (resp.code === 200) {
          this.$message({
            message: resp.message,
            type: 'success'
          });
          this.dialogVisible = false
          this.$emit("getinterface", '1', '1', '100')
        } else {
          this.$message({
            message: resp.message,
            type: 'warning'
          });
        }
      })
    }
  }
}
</script>

<style scoped>
.add-interface {
  float: right;
  margin-top: 10px;
  margin-right: 4px;
  text-align: right;
}
.add-api >>> .el-select {
  display: block;
}

.add-interface-select >>> .el-input__inner {
  width: 100px;
}
</style>
